<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="填写邀请码"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            class="invite-code-box"
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >
            <div class="invite-code-main">
                <div class="code-write-title">
                    <img src="@/assets/images/home/code-write-title.png" />
                </div>
                <div class="code-input-box">
                    <input
                        class="code-input"
                        type="tel"
                        placeholder="输入邀请码"
                        v-model="inviteCode"
                        @blur="goBottom"
                    />
                </div>
                <div class="invite-tips">
                    <img src="@/assets/images/home/invite-tips.png" />
                    <!-- <div
                        class="get-code-btn"
                        @click="getCode"
                    >获取</div> -->
                </div>
                <img
                    class="submit-btn"
                    src="@/assets/images/home/invite-submit-btn.png"
                    @click="submit"
                />
                <div class="invite-slogan">—— 百领好货，一个对得起你挑剔品味的平台 ——</div>
            </div>
        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'InviteCode',
    components: {
        CommonScroll,
        CommonHeader
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            inviteCode: ''
        }
    },
    methods: {
        submit() {
            const that = this
            if (this.inviteCode == '') {
                commonDialog.alert('提示', '请填写邀请码')
                return
            }
            let postData = this.qs.stringify({
                code: this.inviteCode
            })
            this.axios
                .post('/api/user/bind_parent.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.commonDialog.alert(
                            '提示',
                            '填写邀请码成功！',
                            function() {
                                that.$router.go(-1)
                            }
                        )
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        getCode() {
            this.commonDialog.alert('提示', '邀请码：666')
        },
        goBottom() {
            window.scroll(0, 0)
        }
    }
}
</script>

<style lang="stylus" scoped>
.invite-code-box
    background-color #ff9C27
    background-image url('../../assets/images/home/invite-code-bg.png')
    background-size 100%
    background-repeat no-repeat
    .invite-code-main
        margin 2.56rem 0.4rem 0.4rem 0.4rem
        padding 0 0.4rem 0.53rem 0.4rem
        background #fff
        border-radius 10px
        .code-write-title
            display flex
            align-items center
            justify-content center
            height 1.46rem
            img
                height 0.34rem
        .code-input-box
            display flex
            align-items center
            height 1.2rem
            padding 0 0.2rem
            background #f7f7f7
            border-radius 3px
            .code-input
                width 100%
                font-size 0.37rem
                color #333
                background #f7f7f7
            .code-input::-webkit-input-placeholder
                color #b0b0b0
        .invite-tips
            position relative
            width 100%
            .get-code-btn
                position absolute
                top 3.46rem
                right 0.8rem
                line-height 1
                padding 0.1rem 0.3rem
                background #fef3ed
                font-size 0.28rem
                color #f95c1f
                border-radius 30px
            img
                width 100%
        .submit-btn
            display block
            width 3.97rem
            height 1.07rem
            margin 0.2rem auto
        .invite-slogan
            margin-top 0.53rem
            text-align center
            font-size 0.29rem
            color #333
</style>

